import React, { Component } from 'react'

export default class State extends Component {
    state = {
        arr: [1, 2, 3, 4, 5],
        obj: {
            name: "张三"
        }
    }
    add = (num) => {
        // 1. 不推荐
        // this.state.arr.push(6)
        // this.setState({})
        // 2. 推荐
        // this.setState({
        //     arr: [...this.state.arr, num]
        // })
        // 3. 如果是引用类型
        // let arr = JSON.parse(JSON.stringify(this.state.arr))
        // arr.push(num)
        // this.setState({
        //     arr
        // })
    }

    changeName = () => {
        this.setState({
            obj: {
                ...this.state.obj,
                name: "李四"
            }
        })
    }
    render() {
        const { arr, obj } = this.state
        return (
            <div>
                <h2>修改数据</h2>
                {/* 修改数组 */}
                {/* <div>
                    { arr }
                </div>
                <button onClick={ () => {
                    this.add(String(Math.random()).slice(2, 3))
                } }>添加</button> */}

                {/* 修改对象 */}
                {obj.name}
                <button onClick={this.changeName}>修改名字</button>
            </div>
        )
    }
}
